<template>
	<view>
		<view class="total flex-row justify-between align-center">
			<view>
				<text>消费金额：</text>
				¥{{ orderInfo.sum_money || 0 }}
			</view>
			<view>
				<text>下单次数：</text>
				{{ orderInfo.order_nums || 0 }}
			</view>
		</view>
		<view class="orderTab flex-row justify-between">
			<view class="flex-row">
				<button
					@click="handleClick(1)"
					:class="currentActive == 1 ? 'active' : ''"
				>
					订单
				</button>
				<button
					@click="handleClick(2)"
					:class="currentActive == 2 ? 'active' : ''"
				>
					售后单
				</button>
			</view>
			<u-icon
				name="reload"
				color="#159eec"
				size="20"
				@click="handleRefresh"
			></u-icon>
		</view>
		<view class="list">
			<view class="title">订单记录</view>

			<view class="errText" v-if="!orderInfoList.length || !orderInfoList"
				>暂无订单~</view
			>
			<template v-if="orderState == 1">
				<view class="box" v-for="item in orderInfoList" :key="item.id">
					<view class="item flex-row justify-between">
						<view> 订单号：{{ item.order_sn }}</view>
						<text class="status">{{ item.status }}</text>
					</view>
					<view class="item flex-row justify-between">
						<view> 下单时间：{{ item.createtime }} </view>
						<text>￥{{ item.pay_fee }}</text>
					</view>
					<view class="goods flex-row">
						<view> 订购商品：</view>
						<view class="txt">
							{{ item.item[0].goods_title }}
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="box" v-for="item in orderInfoList" :key="item.id">
					<view class="item flex-row justify-between">
						<view> 订单号：{{ item.order_sn }}</view>
						<text class="status">{{ item.aftersale_status }}</text>
					</view>
					<view class="item flex-row justify-between">
						<view> 售后单号：{{ item.aftersale_sn }} </view>
						<text>￥{{ item.refund_fee }}</text>
					</view>
					<view class="goods flex-row">
						<view> 售后时间：</view>
						<view class="txt">
							{{ item.createtime }}
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		orderInfo: {
			type: Object,
			default: {},
		},
		orderInfoList: {
			type: Array,
			default: [],
		},
		orderState: {
			type: Number,
			default: 1,
		},
	},
	data() {
		return {
			currentActive: 1,
		};
	},
	onLoad() {},
	methods: {
		handleClick(num) {
			this.currentActive = num;
			this.$emit("setOrderState", num);
		},
		handleRefresh() {
			this.currentActive = 1;
			this.$emit("refreshOrderList");
		},
	},
};
</script>
<style lang="scss" scoped>
.total {
	& > view {
		background: #f1f9fe;
		height: 80rpx;
		border-radius: 8rpx;
		padding: 0 22rpx;
		color: #e01212;
		font-size: 40rpx;
		width: 48%;
		line-height: 80rpx;
		text {
			color: #5a6062;
			font-size: 24rpx;
		}
	}
	& > view:last-child {
		color: #159eec;
	}
}
.orderTab {
	button {
		margin: 0;
		padding: 0;
		font-size: 24rpx;
		width: 120rpx;
		height: 48rpx;
		line-height: 48rpx;
	}
	& > view {
		button:first-child {
			margin: 40rpx 36rpx 0 0;

			// color: #159eec;
			&::after {
				// border-color: #159eec;
				border-width: 2rpx;
				border-radius: 50rpx;
			}
		}
		button:last-child {
			color: #9999a5;
			margin: 40rpx 36rpx 32rpx;
			&::after {
				border-color: #9999a5;
				border-width: 2rpx;
				border-radius: 50rpx;
			}
		}
	}
}
.list {
	border-top: 1rpx solid #dcdcdc;
	padding-top: 30rpx;
	.box:last-child {
		border: none;
	}
	.box {
		border-bottom: 1rpx solid #dcdcdc;
		padding-bottom: 24rpx;
		padding-top: 32rpx;
		.txt {
			width: 400rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			white-space: wrap;
		}
	}
	.title {
		font-size: 26rpx;
		font-family: PingFang SC-中黑体, PingFang SC;
		font-weight: normal;
		display: flex;
		align-items: center;
		font-weight: 550;
	}
	.title:before {
		content: "";
		display: inline-block;
		width: 4rpx;
		height: 30rpx;
		background: #159eec;
		margin-right: 10rpx;
	}
	.item {
		height: 40rpx;
		margin-bottom: 8rpx;
		line-height: 40rpx;
		flex-wrap: wrap;
		.copy {
			width: 32rpx;
			height: 32rpx;
			margin-left: 12rpx;
			vertical-align: middle;
		}
		.status {
			color: #159eec;
		}
	}
}

.active {
	color: #159eec !important;
}

.errText {
	padding: 20rpx 0rpx;
	text-align: center;
}
</style>
